<div id="commission-tabs" class="easyui-tabs commission-tabs" data-options="fit:true">
    <div title="全部佣金" data-options="closable:false">
        <form id="<?php echo $uniqid;?>">
            <div id="allRewardManage" class="easyui-panel" title="">
                <div class="datagrid-toolbar" style="padding:5px;border-bottom:#eee 1px solid;">
                    <table cellspacing="0" cellpadding="0">
                        <tbody>
                        <tr>
                            <td colspan="3" style="padding-bottom: 5px;">
                                <a href="javascript:void(0);" @click="init();" class="l-btn l-btn-small l-btn-plain"><span
                                        class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxin"></i><span
                                        class="l-btn-text">重载</span></span></a>
                                <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='all'?'selected':''"
                                      @click="filter('all')"><span class="l-btn-text">全部</span></span>
                                <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='waiting'?'selected':''"
                                      @click="filter('waiting')"><span class="l-btn-text">待入账</span></span>
                                <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='accounted'?'selected':''"
                                      @click="filter('accounted')"><span class="l-btn-text">已入账</span></span>
                                <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='cancel'?'selected':''"
                                      @click="filter('cancel')"><span class="l-btn-text">已取消</span></span>
                                <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='back'?'selected':''"
                                      @click="filter('back')"><span class="l-btn-text">已退回</span></span>
                            </td>
                        </tr>
                        <tr>
                            <td><span style="line-height:30px;">分佣日期</span>
                                <input id="orderStartOn" v-model="params.start_on" style="width:110px" type="text"
                                       class="easyui-datebox"> </input>至
                                <input id="orderEndOn" v-model="params.end_on" style="width:110px" type="text"
                                       class="easyui-datebox"> </input>
                            </td>
                            <td>&nbsp;<select v-model="params.keywordsType" class="forminput inputstyle textbox-text validatebox-text" style="width:120px">
                                <option value="daili_id">得佣用户ID</option>
                                <option value="daili_phone">得佣用户手机号</option>
                                <option value="buyer_id">下单会员ID</option>
                                <option value="buyer_phone">下单会员手机号</option>
                                <option value="order_id">订单ID</option>
                                <option value="order_sn">订单编号</option>
                                <!--						暂时不用，隐藏 By hacy.J 2022.3.3-->
                                <!--						<option value="goods_id">商品ID</option>-->
                                <!--						<option value="goods_title">商品名称</option>-->
                            </select>&nbsp;<input v-model="params.keywords" placeholder="请输入内容" @keyup.enter="init" @blur="setNew"
                                                  class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                                                  type="text" style="width: 300px;"> </input>
                            </td>
                            <td><a href="javascript:void(0);" @click="init" class="l-btn l-btn-small l-btn-plain"><span
                                    class="l-btn-left l-btn-icon-left"><i class="iconfont icon-sousuo"></i><span
                                    class="l-btn-text">查询</span></span></a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="con"
                     style="-moz-user-select:none;overflow: hidden;padding-bottom: 50px;">
                    <table class="datagrid-htable" border="0" cellspacing="0" cellpadding="0"
                           style="width: 100%;border: #ccc 0 solid;border-collapse:collapse;">
                        <thead>
                        <tr class="datagrid-header-row" style="background-color: #f9f9f9; font-weight: bold; font-size: 1.8em;">
                            <td width="3%" style="padding:0; border-bottom:#eee 1px solid;" align="center">ID</td>
                            <td width="25%" style="border-bottom:#eee 1px solid;" align="center">订单及商品信息</td>
                            <td width="15%" style="border-bottom:#eee 1px solid;" align="center">下单用户</td>
                            <td width="15%" style="border-bottom:#eee 1px solid;" align="center">得佣用户信息</td>
                            <td width="5%" style="border-bottom:#eee 1px solid;" align="center">分佣类型</td>
                            <td width="5%" style="border-bottom:#eee 1px solid;" align="center">佣金金额</td>
                            <td width="5%" style="border-bottom:#eee 1px solid;" align="center">入帐状态</td>
                            <td width="10%" style="border-bottom:#eee 1px solid;padding: 5px;" align="center">分佣时间</td>
                            <td width="10%" style="border-bottom:#eee 1px solid;padding: 5px;" align="center">变动时间</td>
                        </tr>
                        </thead>
                        <tbody>
                        <template v-for="(vo,index) in dataset">
                            <tr :class="'datagrid-body-row tr_color_'+ index%2">
                                <td style="border:#eee 1px solid; text-align: center;">{{vo.id}}</td>
                                <td style="border:#eee 1px solid; padding: 10px;">
                                    <div style="border-bottom:#eee 1px solid; color: #d39905;" v-if="vo.order_info">
                                        (订单ID:{{vo.order_info.id}}) 订单编号：{{vo.order_info.order_sn}}
                                    </div>
                                    <div style="border-bottom:#eee 1px solid; text-align: center;" v-else>未知订单</div>
                                    <div style="" v-if="vo.order_item_info">
                                        {{vo.order_item_info.goods_title}}<br>
                                        <span style="color: #49b1c4">商品ID:{{vo.order_item_info.goods_id}} | 商品款式：{{vo.order_item_info.goods_sku_text}} | 商品数量：{{vo.order_item_info.goods_num}}件</span>
                                    </div>
                                    <div style=" text-align: center;" v-else>未知商品</div>
                                </td>
                                <td style="border:#eee 1px solid; padding: 0 10px;" v-if="vo.buyer_info">
                                    ID:{{vo.buyer_info.id}}<br>
                                    昵称：{{vo.buyer_info.realname?vo.buyer_info.realname:vo.buyer_info.nickname}}<br>
                                    电话：{{vo.buyer_info.phone?vo.buyer_info.phone:''}}
                                </td>
                                <td style="border:#eee 1px solid; text-align: center;" v-else>未知用户</td>
                                <td style="border:#eee 1px solid; padding: 0 10px;" v-if="vo.bonus_info">
                                    ID:{{vo.bonus_info.id}}<br>
                                    昵称：{{vo.bonus_info.realname?vo.bonus_info.realname:vo.bonus_info.nickname}}<br>
                                    电话：{{vo.bonus_info.phone?vo.bonus_info.phone:''}}
                                </td>
                                <td style="border:#eee 1px solid; text-align: center;" v-else>未知用户</td>
                                <td style="border:#eee 1px solid; text-align: center;">{{vo.fenghong_type}}</td>
                                <td style="border:#eee 1px solid; text-align: center;">{{vo.commission}}元</td>
                                <td style="border:#eee 1px solid; text-align: center;">
                                    <span :class="'status_color_'+ vo.status">{{vo.status_name}}</span>
                                </td>
                                <td style="border:#eee 1px solid; text-align: center;">{{vo.created_at}}</td>
                                <td style="border:#eee 1px solid; text-align: center;">{{vo.updated_at}}</td>
                            </tr>
                        </template>
                        </tbody>
                    </table>
                    <div class="datagrid-pager pagination"
                         style="width: 100%;position: fixed;bottom: 0px; background-color: #f1f1f1;padding-top:5px;border-top:#ccc 1px solid;display: flex;">
                        <table cellspacing="0" cellpadding="0" border="0">
                            <tbody>
                            <tr>
                                <td><select v-model="params.rows" class="pagination-page-list" @change="page_rows_change()">
                                    <option value="10">10</option>
                                    <option value="20">20</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                </select></td>
                                <td>
                                    <div class="pagination-btn-separator"></div>
                                </td>
                                <td>
                                    <template v-if="params.page==1">
                                        <a href="javascript:;" @click="first"
                                           class="l-btn l-btn-small l-btn-plain l-btn-disabled l-btn-plain-disabled"
                                        ><span class="l-btn-left l-btn-icon-left"><span
                                                class="l-btn-text l-btn-empty">&nbsp;</span><span
                                                class="l-btn-icon pagination-first">&nbsp;</span></span></a>
                                    </template>
                                    <template v-else>
                                        <a href="javascript:;" @click="first"
                                           class="l-btn l-btn-small l-btn-plain"
                                        ><span class="l-btn-left l-btn-icon-left"><span
                                                class="l-btn-text l-btn-empty">&nbsp;</span><span
                                                class="l-btn-icon pagination-first">&nbsp;</span></span></a>
                                    </template>
                                </td>
                                <td>
                                    <template v-if="params.page==1">
                                        <a href="javascript:;" @click="pre"
                                           class="l-btn l-btn-small l-btn-plain l-btn-disabled l-btn-plain-disabled"
                                        ><span class="l-btn-left l-btn-icon-left"><span
                                                class="l-btn-text l-btn-empty">&nbsp;</span><span
                                                class="l-btn-icon pagination-prev">&nbsp;</span></span></a>
                                    </template>
                                    <template v-else>
                                        <a href="javascript:;" @click="pre"
                                           class="l-btn l-btn-small l-btn-plain"
                                        ><span class="l-btn-left l-btn-icon-left"><span
                                                class="l-btn-text l-btn-empty">&nbsp;</span><span
                                                class="l-btn-icon pagination-prev">&nbsp;</span></span></a>
                                    </template>
                                </td>
                                <td>
                                    <div class="pagination-btn-separator"></div>
                                </td>
                                <td><span style="padding-left:6px;">第</span></td>
                                <td><input class="pagination-num" type="text" v-model="params.page" size="2" @blur="page_change"></td>
                                <td><span style="padding-right:6px;">共{{totalPage}}页</span></td>
                                <td>
                                    <div class="pagination-btn-separator"></div>
                                </td>
                                <td>
                                    <template v-if="params.page==totalPage">
                                        <a href="javascript:;" @click="next"
                                           class="l-btn l-btn-small l-btn-plain l-btn-disabled l-btn-plain-disabled"><span
                                                class="l-btn-left l-btn-icon-left"><span
                                                class="l-btn-text l-btn-empty">&nbsp;</span><span
                                                class="l-btn-icon pagination-next">&nbsp;</span></span></a>
                                    </template>
                                    <template v-else>
                                        <a href="javascript:;" @click="next" class="l-btn l-btn-small l-btn-plain"><span
                                                class="l-btn-left l-btn-icon-left"><span
                                                class="l-btn-text l-btn-empty">&nbsp;</span><span
                                                class="l-btn-icon pagination-next">&nbsp;</span></span></a>
                                    </template>
                                </td>
                                <td>
                                    <template v-if="params.page==totalPage">
                                        <a href="javascript:;" @click="last"
                                           class="l-btn l-btn-small l-btn-plain l-btn-disabled l-btn-plain-disabled"><span
                                                class="l-btn-left l-btn-icon-left"><span
                                                class="l-btn-text l-btn-empty">&nbsp;</span><span
                                                class="l-btn-icon pagination-last">&nbsp;</span></span></a>
                                    </template>
                                    <template v-else>
                                        <a href="javascript:;" @click="last" class="l-btn l-btn-small l-btn-plain"><span
                                                class="l-btn-left l-btn-icon-left"><span
                                                class="l-btn-text l-btn-empty">&nbsp;</span><span
                                                class="l-btn-icon pagination-last">&nbsp;</span></span></a>
                                    </template>
                                </td>
                                <td>
                                    <div class="pagination-btn-separator"></div>
                                </td>
                                <td><a href="javascript:;" @click="init" class="l-btn l-btn-small l-btn-plain"><span
                                        class="l-btn-left l-btn-icon-left"><span
                                        class="l-btn-text l-btn-empty">&nbsp;</span><span
                                        class="l-btn-icon pagination-load">&nbsp;</span></span></a></td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="pagination-info">显示{{(params.page-1) * params.rows + 1}}到{{params.page * params.rows}},共{{total}}记录</div>
                    </div>
                </div>
            </div>
        </form>
        <div id="rewarddlg" class="easyui-dialog" style="width:840px; height:520px;" title="信息框" closed="true"></div>


    </div>
    <div title="代理分红" data-options="closable:false" href="/admin/agent/reward"></div>
<!--    <div title="股东分红" data-options="closable:false" href="/admin/gudong/reward"></div>-->
    <div title="推客分红" data-options="closable:false" href="/admin/tuike/reward"></div>
    <div title="区域经销商分红" data-options="closable:false" href="/admin/qudai/reward"></div>
    <div title="两级收益分佣" data-options="closable:false" href="/admin/twostage/reward"></div>
    <div title="店铺分红" data-options="closable:false" href="/admin/dianpufenhongreward/index"></div>
</div>
<script>
    var allRewardVm = new Vue({
        el: '#<?php echo $uniqid;?>',
        data: {
            dataset: [],
            params: {
                sort: 'created_at',
                order: 'desc',
                rows: 10,
                page: 1,
                start_on: '',
                end_on: '',
                keywords: '',
                keywordsType:'daili_id',
                mode: 'all'
            },
            member_id: parseInt('<?php echo $id;?>'),
            total: 0,
            totalPage: 0,
        },
        filters: {
            formatDate(nS){
                return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
            }
        },
        mounted() {
            if(this.member_id===0) {
                this.params.start_on = moment().format("Y-MM-DD 00:00:00");
                this.params.end_on = moment().format("Y-MM-DD HH:mm:ss");
            }else{
                this.params.keywordsType = 'daili_id';
                this.params.keywords = this.member_id;
            }
            setTimeout(()=>{
                $('#<?php echo $uniqid;?> #orderStartOn').datebox('setValue', this.params.start_on);
                $('#<?php echo $uniqid;?> #orderEndOn').datebox('setValue', this.params.end_on);
                this.init();
            }, 200);
        },
        methods: {
            init: function () {
                $('#<?php echo $uniqid;?> .pagination').width($(window).width() - $("#leftMenu").width() - 30);
                showLoading('#<?php echo $uniqid;?>');
                this.params.start_on = $('#<?php echo $uniqid;?> #orderStartOn').datebox('getValue');
                this.params.end_on = $('#<?php echo $uniqid;?> #orderEndOn').datebox('getValue');
                $.post('/admin/commissionlogs/index', this.params, (data) => {
                    hideLoading();
                    this.dataset = data.rows;
                    this.total = data.total;
                    this.totalPage = Math.ceil(data.total / this.params.rows);
                }, 'json');
            },
            allRewardExport:function () {
                showLoading('.con');
                $.post('/admin/tuike/rewardexport', {
                    keywordsType: this.params.keywordsType,
                    keywords: this.params.keywords,
                    start_on: this.params.start_on,
                    end_on: this.params.end_on,
                    mode: this.params.mode,
                }, function (data) {
                    hideLoading();
                    if (parseInt(data.ret) === 0) {
                        $.messager.show({
                            title: '提示',
                            msg: data.msg,
                            timeout: 3000,
                            showType: 'slide'
                        });
                        eventmaterialDownload(data.data);
                    } else {
                        $.messager.alert('提示', data.msg, 'warning');
                    }
                }, 'json').fail((response)=> {
                    hideLoading();
                    $.messager.alert('提示', response.responseText, 'warning');
                });
            },
            setNew:function (){
                allRewardVm.params.page = 1;
            },
            page_rows_change: function (){
                allRewardVm.params.page = 1;
                allRewardVm.init();
            },
            page_change:function (){
                allRewardVm.init();
            },
            filter(mode) {
                this.params.mode = mode;
                this.init();
            },
            first: function () {
                allRewardVm.params.page = 1;
                allRewardVm.init();
            },
            pre: function () {
                if (allRewardVm.params.page > 1) {
                    allRewardVm.params.page--;
                    allRewardVm.init();
                }
            },
            next: function () {
                if (allRewardVm.params.page < allRewardVm.totalPage) {
                    allRewardVm.params.page++;
                    allRewardVm.init();
                }
            },
            last: function () {
                allRewardVm.params.page = allRewardVm.totalPage;
                allRewardVm.init();
            },
        }
    });

    document.addEventListener('onResize', (e) => {
        let height = $(window).height() - $(".top").height() - 46;
        $('#allRewardManage').panel('resize', {width: 'auto', height: 'auto'});
    });
</script>

<style>
    .l-btn-plain{
        border: rgba(0,0,0,0) 1px solid;
    }
    .order-item-rows {
        padding: 4px;
        display: flex;
        min-height: 90px;
        justify-content: space-between;
        align-items: center;
        border-bottom: #eee 1px solid;
    }

    .datagrid-body-row td{
        line-height: 1.8em !important;
    }

    .datagrid-toolbar .selected {
        color: #f1f1f1;
        background: #1065a7;
        border: 1px solid #f0f0f0;
    }

    .tr_color_0{
        background: #ffffff;
    }
    .tr_color_1{
        background: #f8f8f8;
    }
    .status_color_0{
        color: #f89a2d;
    }
    .status_color_1{
        color: #0eb913;
    }
    .status_color_-1{
        color: #d33632;
    }
    .status_color_-2{
        color: #1F1F1F;
    }
    .tabs-panels{
        margin: 0 auto !important;
    }
</style>